<template>
  <view class="home">
    <navBar :languageSwitch="languageSwitch" @submitLanguage="submitLanguage"></navBar>
    <view>
      <view class="home-ling">
        <view class="my-1">
          <img class="my-1-1" src="../../static/jiaoyi/wode/2.png" alt="">
          <img class="my-1-2" src="../../static/jiaoyi/wode/3.png" alt="">
          <div class="my-1-3">{{ myLevel }}:{{gradeLevel}}</div>
        </view>
        <view class="my-2" @tap="handleMyProperty">
            {{property}}
        </view>
      </view>
    </view>


    <div class="my-3">
      <div style="height:  10px"></div>
      <uni-row class="my-3-2-1-1-1">
        <uni-col :span="8"><div class="my-3-2-1">{{DividendDistribution}}</div></uni-col>
        <uni-col :span="10"><div class="my-3-2-3">{{queryUnclaimedCommission.bonus}}</div></uni-col>
        <uni-col :span="4"><div class="my-3-2-2" @click="handleCommission('1')">{{receive}}</div></uni-col>
      </uni-row>
      <div style="height:  10px"></div>
      <uni-row class="my-3-2-1-1-1">
        <uni-col :span="8"><div class="my-3-2-1">{{Recommendation}}</div></uni-col>
        <uni-col :span="10"><div class="my-3-2-3">{{queryUnclaimedCommission.recommend}}</div></uni-col>
        <uni-col :span="4"><div class="my-3-2-2" @click="handleCommission('2')">{{receive}}</div></uni-col>
      </uni-row>
      <div style="height:  10px"></div>
      <uni-row class="my-3-2-1-1-1">
        <uni-col :span="8"><div class="my-3-2-1">{{Expand}}</div></uni-col>
        <uni-col :span="10"><div class="my-3-2-3">{{queryUnclaimedCommission.expand}}</div></uni-col>
        <uni-col :span="4"><div class="my-3-2-2" @click="handleCommission('3')">{{receive}}</div></uni-col>
      </uni-row>
      <div style="height:  10px"></div>
      <uni-row class="my-3-2-1-1-1">
        <uni-col :span="8"><div class="my-3-2-1">{{Management}}</div></uni-col>
        <uni-col :span="10"><div class="my-3-2-3">{{queryUnclaimedCommission.manager}}</div></uni-col>
        <uni-col :span="4"><div class="my-3-2-2" @click="handleCommission('4')">{{receive}}</div></uni-col>
      </uni-row>
      <div style="height:  10px"></div>
      <uni-row class="my-3-2-1-1-1">
        <uni-col :span="8"><div class="my-3-2-1">{{Agency}}</div></uni-col>
        <uni-col :span="10"><div class="my-3-2-3">{{queryUnclaimedCommission.agent}}</div></uni-col>
        <uni-col :span="4"><div class="my-3-2-2" @click="handleCommission('5')">{{receive}}</div></uni-col>
      </uni-row>
      <div style="height:  20px"></div>
    </div>

    <div style="margin-top: 20px">
      <div class="my-4">
        <div class="my-4-1" >{{queryReferralCode}}</div>
        <img class="my-4-2" src="../../static/jiaoyi/wode/8.png" alt="" @click="copyLinkMsg">
      </div>
    </div>

    <div style="margin-top: 20px">
      <div class="my-5">
<!--        <div class="my-5-1">-->
<!--          <div class="my-5-1-1">{{TeamPerformance}}</div>-->
<!--          <div class="my-5-1-2">0</div>-->
<!--        </div>-->
        <div class="my-5-2">
          <div class="my-5-1-1">{{MyCommunityPerformance}}</div>
          <div class="my-5-1-2">{{smallArea}}</div>
        </div>
      </div>
    </div>
    <div style="height:  20px"></div>
    <div class="my-6" @tap="goVideo">
      {{DirectPush}}
    </div>
    <div style="height:  20px"></div>
    <div class="my-6" @tap="goRenGo">
      {{subscription}}
    </div>
    <div style="height:  20px"></div>
    <div class="my-6" @tap="goZhiYa">
      {{myPledge}}
    </div>
    <div style="height:  20px"></div>
  </view>
</template>

<script setup>
import navBar from '../../component/navBar.vue'
import {ref,reactive,onMounted} from "vue";
import {onLoad,onShow} from "@dcloudio/uni-app";
import {getMyCommission,getMyUnclaimedCommission,getMyInviteLink} from "@/api/my";
import {MyProperty} from "@/api/zichan";
let queryReferralCode = ref('');
let gradeLevel = ref(null);
let smallArea = ref(null);


let queryCommission = reactive({})
let queryUnclaimedCommission = reactive({
  bonus: 0,
  recommend: 0,
  expand: 0,
  manager: 0,
  agent: 0,
})
let languageSwitch = ref(true);
//文档
let myLevel = ref('我的等级');
let property = ref('資産');
let InvitationLink = ref('我的邀請鏈接')
let TeamPerformance = ref('我的團隊業績')
let MyCommunityPerformance = ref('我的小區業績');
let receive = ref('领取');
let DividendDistribution = ref('分紅')
let Recommendation = ref('推薦');
let Expand = ref('拓展傭金');
let Management = ref('管理傭金');
let Agency = ref('代理傭金');
let DirectPush = ref('我的直推');
let subscription= ref('我的認購')
let myPledge = ref('我的質押');

const  handleInvitationLink = ()=>{
  getMyInviteLink().then(res=>{
    if (res.data.code === 200){
      queryReferralCode.value = res.data.data.referral_code;
      gradeLevel.value = res.data.data.grade;
      smallArea.value = res.data.data.small_area;
    }
  }).catch(error=>{})
}

const copyLinkMsg = async ()=>{
  if ('clipboard' in navigator) {
    try {
      await navigator.clipboard.writeText(queryReferralCode.value);
      uni.showToast({
        title: 'copy',
        icon:'success',
      });
    } catch (err) {}
  } else {
    // 对于不支持 navigator.clipboard 的浏览器的回退方案
    const textarea = document.createElement('textarea');
    textarea.value = queryReferralCode.value;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    uni.showToast({
      title: 'copy',
      icon:'success',
    });
  }
}

onMounted(()=>{
  handleInvitationLink();
})

const submitLanguage = (row)=>{}

const handleMyProperty = ()=>{
  MyProperty().then(res=>{
    if (res.data.code === 200){
      uni.navigateTo({
        url: '/pages/zichan/zichan'
      })
    }
  })
}

const handleCommission = (row)=>{
  queryCommission = Object.assign(queryCommission,{
    amount:'500',
    type:row,
  })
  getMyCommission(queryCommission).then(res=>{
    if(res.data.code === 200){
      uni.showToast({
        title: 'ok',
        icon: 'success'
      })
    }
    if(res.data.code === 400){
      uni.showToast({
        title: 'No Commission',
        icon: 'error',
      })
    }
  })
}

const goVideo = ()=>{
  uni.navigateTo({
    url: '/pages/zhitui/index'
  })
}
const goRenGo = ()=>{
  uni.navigateTo({
    url: '/pages/zhitui/rengou'
  })
}

const goZhiYa = ()=>{
  uni.navigateTo({
    url: '/pages/zhitui/zhiya'
  })
}

const getMyUnclaimedCommissionList = () =>{
  getMyUnclaimedCommission().then(res=>{
    if(res.data.code === 200){
      queryUnclaimedCommission.agent= res.data.data.agent
      queryUnclaimedCommission.bonus= res.data.data.bonus
      queryUnclaimedCommission.expand= res.data.data.expand
      queryUnclaimedCommission.manager= res.data.data.manager
      queryUnclaimedCommission.recommend= res.data.data.recommend

    }
    if(res.data.code === 400){}
  })
}
onLoad(()=>{
  getMyUnclaimedCommissionList();
})

onShow(()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang === '中文'){
    myLevel.value='我的等级';
    property.value='資産';
    InvitationLink.value='我的邀請鏈接'
    TeamPerformance.value='我的團隊業績'
    MyCommunityPerformance.value='我的小區業績'
    receive.value='领取';
    DividendDistribution.value='分紅';
    Recommendation.value='推薦'
    Expand.value='拓展傭金'
    Management.value='管理傭金';
    Agency.value='代理傭金';
    DirectPush.value='我的直推';
    subscription.value='我的認購'
    myPledge.value='我的質押';
  }
  if(lang === 'Eng'){
    myLevel.value='My Level';
    property.value='Property';
    InvitationLink.value='My Invitation Link'
    TeamPerformance.value='Team'
    MyCommunityPerformance.value='Community'
    receive.value='Receive';
    DividendDistribution.value='Dividend Distribution'
    Recommendation.value='Recommendation'
    Expand.value='Expand'
    Management.value='Management'
    Agency.value='Agency'
    DirectPush.value='My Direct Push';
    subscription.value='My Subscription'
    myPledge.value='My Pledge';
  }
  if (lang === '日本語'){
    myLevel.value='レベル';
    property.value='資産';
    InvitationLink.value='招待リンク'
    TeamPerformance.value='チームの実績'
    MyCommunityPerformance.value='マイセルの実績'
    receive.value='受け';
    DividendDistribution.value='配分';
    Recommendation.value='推薦'
    Expand.value='拡大'
    Management.value='管理'
    Agency.value='代理'
    DirectPush.value='私の直接の推進';
    subscription.value='私の購読'
    myPledge.value='抵当に入れる';
  }
  if (lang === '한국어'){
    myLevel.value='레벨';
    property.value='자산';
    InvitationLink.value='초대 링크'
    TeamPerformance.value='팀 성과'
    MyCommunityPerformance.value='내 커뮤니티 성과'
    receive.value='받기';
    DividendDistribution.value='배분';
    Recommendation.value='추천'
    Expand.value='확대'
    Management.value='관리'
    Agency.value='대리'
    DirectPush.value='내 직진';
    subscription.value='구독'
    myPledge.value='내 질';

  }
})


</script>



<style scoped>
.my-6{
  width: 92%;
  margin: 0 auto;
  background: #FFFFFF;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
}
.my-4{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  margin: 0 auto;
  background: #FFFFFF;
  height:60px;
  line-height: 60px;
  border-radius: 10px;
  font-size: 16px;
}
.my-5{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  margin: 0 auto;
  background:rgb(235, 235, 235);
}
.my-5-1{
  font-size: 16px;
  width: 47%;
  height: auto;
  background: #FFFFFF;
  border-radius: 10px;
  text-align: center;
}
.my-5-2{
  width: 100%;
  font-size: 16px;
  height: auto;
  background: #FFFFFF;
  border-radius: 10px;
  text-align: center;
}
.my-4-1{
  padding-left: 20px;
  box-sizing: border-box;
  width: 450px;
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-height: 60px; /* 设置最大高度 */
}
.my-4-2{
  padding-right: 20px;
  box-sizing: border-box;
}
.my-3-3{
  background: rgb(42, 84, 160);
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: #FFFFFF;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;

}
.my-3-2{
  background: rgb(235, 235, 235);
  width: 90%;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  padding: 0 3px;
  box-sizing: border-box;
  align-items: center;
}
.my-3-2-1-1-1{
  background: rgb(235, 235, 235);
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  //margin: 0 auto;
  display: flex;
  justify-content: center;
  //box-sizing: border-box;
  align-items: center;
}
.my-3-2-3{
  width: 40px;
}
.my-3-2-1{
  margin-left: 10px;
  font-size: 16px;
}
.my-3-2-2{
  margin-right: 10px;
  font-size: 16px;
}

.my-3-4{
  width: 90%;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my-3-4-1{
  margin-left: 10px;
  font-size: 16px;
}
.my-3-4-2{
  margin-right: 10px;
  font-size: 16px;
  color: rgb(71, 102, 167);
}
.my-3-1-1{
  margin-top: 2vh;
  font-size: 4vw;
}
.my-3-1-1-1{

}
.my-3-1-1-2{
  margin-top: 1vh;
  text-align: center;
}
.home{
  background-color: #EBEBEB;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.home-ling{
  margin-top: 1vh;
  scale: 0.92;
  background-image: url("../../static/jiaoyi/wode/1.png");
  background-repeat: no-repeat; /* 背景图片是否重复 */
  background-position: center; /* 背景图片的位置 */
  background-size: cover; /* 背景图片的尺寸，cover表示覆盖整个元素，不留空白 */
  width: 100%; /* 或其他尺寸 */
  height: auto; /* 或其他尺寸 */
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;
  padding: 5vh 0;
  box-sizing: border-box;
}
.my-1{
  margin-left: 5vw;
  display: flex;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-2{
  margin-right: 5vh;
  font-size: 4vw;
  width: 10vw;
}
.my-1-1{
  width: 30%;
  height: 40%;
}
.my-1-2{
  //margin-top: 2vh;
  height: 5vw;
}
.my-1-3{
  //margin-top: 2vh;
  font-size: 4vw;
  margin-left: 2vw;
}
.my-3{
  background: #FFFFFF;
  width: 92%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 0 5%;
  box-sizing: border-box;
}
.my-3-1{
  display: flex;
  justify-content: space-evenly;
}
.my-5-1-1{
  height: 60px;
  line-height: 60px;
}
.my-5-1-2{
  height: 40px;
  line-height: 40px;
}
</style>